<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  
  
    <meta name="keywords" content="博客">
  
  
    <meta name="description" content="记录Vue3、Python学习笔记和实例技术分享">
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>pinia 讲座 |  Hexo Cobra1966</title>
  <title>pinia 讲座 |  Hexo Cobra1966</title>
  
    <link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/images/icons/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon-180x180.png">
    <link rel="apple-touch-icon" sizes="167x167" href="/images/icons/apple-touch-icon-167x167.png">
  
  
    <link rel="shortcut icon" href="/favicon.ico">
  
  
<link rel="stylesheet" href="/Hexo_blog/css/style.css">

<meta name="generator" content="Hexo 5.4.1"></head>

<body>
  <main class="main">
    
	<header class="header">

	<div class="container">
		<nav class="navbar d-flex justify-content-between align-items-center">
			<a class="brand" href="/Hexo_blog/">
				<img class="logo" src="/Hexo_blog/images/brand.svg" alt="Hexo Cobra1966" role="img">
			</a>
			<ul class="main-nav">
  
    
  <li class="nav-item ">
    <a class="nav-item-link" href="/Hexo_blog/">首页</a>
  </li>
  
    
  <li class="nav-item ">
    <a class="nav-item-link" href="/Hexo_blog/gallery">画廊</a>
  </li>
  
    
  <li class="nav-item ">
    <a class="nav-item-link" href="/Hexo_blog/stories">案例</a>
  </li>
  
    
  <li class="nav-item ">
    <a class="nav-item-link" href="/Hexo_blog/archives">新闻</a>
  </li>
  
    
  <li class="nav-item ">
    <a class="nav-item-link" href="/Hexo_blog/about">关于</a>
  </li>
  
</ul>
		</nav>
		<a id="mobile-nav-toggle">
			<span class="mobile-nav-toggle-bar"></span>
			<span class="mobile-nav-toggle-bar"></span>
			<span class="mobile-nav-toggle-bar"></span>
		</a>
	</div>
</header>

    <section>
      <div class="container">
  <article id="post-pinia" class="article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  
  
  <div class="artcle-cover mb-5">
    
  </div>
  
  <div class="article-inner">
    
    <header class="article-header">
      
      
  
    <h1 class="article-title" itemprop="name">
      pinia 讲座
    </h1>
  

      <div class="article-meta">
        <time class="text-gray" datetime="2022-03-03T07:41:05.000Z" itemprop="datePublished">
  2022-03-03
</time>
        
      </div>
      
    </header>
    
    <div class="article-entry" itemprop="articleBody">
      <h1 id="Vite-Vue-3-Typescript-vue-router-pinia"><a href="#Vite-Vue-3-Typescript-vue-router-pinia" class="headerlink" title="Vite + Vue 3 + Typescript + vue-router + pinia"></a>Vite + Vue 3 + Typescript + vue-router + pinia</h1><p><strong><em><font color=red size=4 >强烈推荐使用 yarn 安装项目依赖</font></em></strong></p>
<figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">本框架使用 Vue 3.2.25 + TypeScript + Vite + vue-router + pinia ,摈弃了webpack 和vuex 替代为vite 和pinia,</span><br><span class="line">本项目的创建过程 可查阅 从零搭建本项目指南</span><br></pre></td></tr></table></figure>

<h2 id="vscode-插件安装"><a href="#vscode-插件安装" class="headerlink" title="vscode 插件安装"></a>vscode 插件安装</h2><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">1、ESLint</span><br><span class="line">2、Prettier - Code formatter</span><br><span class="line">3、Stylelint</span><br><span class="line">4、Vue Language Features (Volar)</span><br><span class="line">5、Path Intellisense</span><br><span class="line">6、TypeScript Importer</span><br><span class="line">7、markdownlint</span><br></pre></td></tr></table></figure>

<h2 id="vscode-setting-json-添加配置"><a href="#vscode-setting-json-添加配置" class="headerlink" title="vscode setting.json 添加配置"></a>vscode setting.json 添加配置</h2><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;editor.codeActionsOnSave&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;source.fixAll&quot;</span><span class="punctuation">:</span> <span class="keyword">false</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;source.fixAll.eslint&quot;</span><span class="punctuation">:</span> <span class="keyword">true</span> <span class="comment">//保存自动修复, eslint.autoFixOnSave已废弃</span></span><br><span class="line"><span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line"><span class="attr">&quot;css.validate&quot;</span><span class="punctuation">:</span> <span class="keyword">false</span><span class="punctuation">,</span></span><br><span class="line"><span class="attr">&quot;less.validate&quot;</span><span class="punctuation">:</span> <span class="keyword">false</span><span class="punctuation">,</span></span><br><span class="line"><span class="attr">&quot;scss.validate&quot;</span><span class="punctuation">:</span> <span class="keyword">false</span><span class="punctuation">,</span></span><br><span class="line"><span class="attr">&quot;stylelint.enable&quot;</span><span class="punctuation">:</span> <span class="keyword">true</span><span class="punctuation">,</span></span><br><span class="line"><span class="attr">&quot;stylelint.validate&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line">  <span class="string">&quot;css&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="string">&quot;scss&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="string">&quot;less&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="string">&quot;styl&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="string">&quot;vue&quot;</span></span><br><span class="line"><span class="punctuation">]</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure>

<h2 id="从零搭建本项目指南"><a href="#从零搭建本项目指南" class="headerlink" title="从零搭建本项目指南"></a>从零搭建本项目指南</h2><p><strong>建议先下载 yarn 再开始立项，否则同含义的 npm 代码只能自行百度</strong></p>
<h3 id="一，下载模板"><a href="#一，下载模板" class="headerlink" title="一，下载模板"></a>一，下载模板</h3><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">yarn create vite</span><br><span class="line"></span><br><span class="line">输入项目名</span><br><span class="line"></span><br><span class="line">选择使用的模板，选vue</span><br><span class="line"></span><br><span class="line">选vue-ts</span><br><span class="line"></span><br><span class="line">cd 项目名</span><br></pre></td></tr></table></figure>

<h3 id="二，下载安装包"><a href="#二，下载安装包" class="headerlink" title="二，下载安装包"></a>二，下载安装包</h3><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">yarn //下载包</span><br><span class="line"></span><br><span class="line">yarn add pinia</span><br><span class="line"></span><br><span class="line">yarn dev //运行</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="三-由于个人认为vite默认的-vue3-写法不是很好，所以改掉-vite-默认的风格-（如下代码）"><a href="#三-由于个人认为vite默认的-vue3-写法不是很好，所以改掉-vite-默认的风格-（如下代码）" class="headerlink" title="三.由于个人认为vite默认的 vue3 写法不是很好，所以改掉 vite 默认的风格 （如下代码）"></a>三.由于个人认为vite默认的 vue3 写法不是很好，所以改掉 vite 默认的风格 （如下代码）</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">// This starter template is using Vue 3 &lt;script setup&gt; SFCs</span><br><span class="line">// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup</span><br><span class="line">import HelloWorld from &quot;./components/HelloWorld.vue&quot;;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>改为</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;script lang=&quot;ts&quot;&gt;</span><br><span class="line">import &#123; defineComponent &#125; from &quot;vue&quot;;</span><br><span class="line">import HelloWorld from &quot;./components/HelloWorld.vue&quot;;</span><br><span class="line">export default defineComponent(&#123;</span><br><span class="line">  components: &#123; HelloWorld &#125;,</span><br><span class="line">&#125;);</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h4 id="此时-App-vue-会报错，大概的意思为-HelloWorld没有导出默认的模块-改为下列代码。然后关闭再打开-App-vue-就没报错了"><a href="#此时-App-vue-会报错，大概的意思为-HelloWorld没有导出默认的模块-改为下列代码。然后关闭再打开-App-vue-就没报错了" class="headerlink" title="此时 App.vue 会报错，大概的意思为 HelloWorld没有导出默认的模块 改为下列代码。然后关闭再打开 App.vue 就没报错了"></a>此时 App.vue 会报错，大概的意思为 HelloWorld没有导出默认的模块 改为下列代码。然后关闭再打开 App.vue 就没报错了</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;script lang=&quot;ts&quot;&gt;</span><br><span class="line">import &#123; defineComponent &#125; from &quot;vue&quot;;</span><br><span class="line">import &#123; ref &#125; from &quot;vue&quot;;</span><br><span class="line">export default defineComponent(&#123;</span><br><span class="line">  props: &#123;</span><br><span class="line">    msg: String,</span><br><span class="line">  &#125;,</span><br><span class="line">  setup() &#123;</span><br><span class="line">    const count = ref(0);</span><br><span class="line">    return &#123;</span><br><span class="line">      count,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;);</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h3 id="四，使用-pinia-具体用法可参见-src-stores-main-ts"><a href="#四，使用-pinia-具体用法可参见-src-stores-main-ts" class="headerlink" title="四，使用 pinia 具体用法可参见 src/stores/main.ts"></a>四，使用 pinia 具体用法可参见 src/stores/main.ts</h3><h4 id="1-全局挂载-在-src-main-ts-中"><a href="#1-全局挂载-在-src-main-ts-中" class="headerlink" title="1.全局挂载 (在/src/main.ts 中)"></a>1.全局挂载 (在/src/main.ts 中)</h4><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createApp &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&quot;./App.vue&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; createPinia &#125; <span class="keyword">from</span> <span class="string">&quot;pinia&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">createApp</span>(<span class="title class_">App</span>);</span><br><span class="line">app.<span class="title function_">use</span>(<span class="title function_">createPinia</span>());</span><br><span class="line">app.<span class="title function_">mount</span>(<span class="string">&quot;#app&quot;</span>);</span><br></pre></td></tr></table></figure>

<h4 id="2-创建一个仓库（具体用法可参见-src-stores-main-ts）"><a href="#2-创建一个仓库（具体用法可参见-src-stores-main-ts）" class="headerlink" title="2.创建一个仓库（具体用法可参见 src/stores/main.ts）"></a>2.创建一个仓库（具体用法可参见 src/stores/main.ts）</h4><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; defineStore &#125; <span class="keyword">from</span> <span class="string">&quot;pinia&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title class_">IndexStore</span> = <span class="title function_">defineStore</span>(<span class="string">&quot;index&quot;</span>, &#123;</span><br><span class="line">  <span class="attr">state</span>: <span class="function">() =&gt;</span> (&#123;</span><br><span class="line">    <span class="attr">counter</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;Eduardo&quot;</span>,</span><br><span class="line">  &#125;),</span><br><span class="line">  <span class="attr">getters</span>: &#123;</span><br><span class="line">    <span class="attr">doubleCount</span>: <span class="function">(<span class="params">state: <span class="built_in">any</span></span>) =&gt;</span> state.<span class="property">counter</span> * <span class="number">2</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">actions</span>: &#123;</span><br><span class="line">    <span class="title function_">resetCounter</span>(<span class="params">param: <span class="built_in">any</span></span>) &#123;</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">counter</span> = param;</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h4 id="3-使用（参见-components-HelloWorld-vue）getters-用法和普通的一样"><a href="#3-使用（参见-components-HelloWorld-vue）getters-用法和普通的一样" class="headerlink" title="3.使用（参见./components/HelloWorld.vue）getters 用法和普通的一样"></a>3.使用（参见./components/HelloWorld.vue）getters 用法和普通的一样</h4><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">IndexStore</span> &#125; <span class="keyword">from</span> <span class="string">&quot;../stores/main&quot;</span>;</span><br><span class="line"><span class="title function_">setup</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> indexStore = <span class="title class_">IndexStore</span>();</span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">addCounter</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">      indexStore.$patch(&#123; <span class="attr">counter</span>: indexStore.<span class="property">counter</span> + <span class="number">1</span> &#125;)</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      indexStore,</span><br><span class="line">      addCounter,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;span&gt;&#123;&#123; indexStore.counter &#125;&#125;*2=&#123;&#123; indexStore.doubleCount &#125;&#125;&lt;/span&gt;</span><br></pre></td></tr></table></figure>

<h4 id="4-更新（参考-上述代码中的-addCounter）"><a href="#4-更新（参考-上述代码中的-addCounter）" class="headerlink" title="4.更新（参考 上述代码中的 addCounter）"></a>4.更新（参考 上述代码中的 addCounter）</h4><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//   甚至可以这样</span></span><br><span class="line">indexStore.<span class="property">counter</span>++;</span><br></pre></td></tr></table></figure>

<h3 id="五，使用-vue-router-（注意看注释）"><a href="#五，使用-vue-router-（注意看注释）" class="headerlink" title="五，使用 vue-router （注意看注释）"></a>五，使用 vue-router （注意看注释）</h3><h4 id="1-安装-vue-router"><a href="#1-安装-vue-router" class="headerlink" title="1. 安装 vue-router"></a>1. 安装 vue-router</h4><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add vue-router</span><br></pre></td></tr></table></figure>

<figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add vue-router</span><br></pre></td></tr></table></figure>

<h4 id="2-建立工程目录（按照第一行注释的位置建文件和修改代码）"><a href="#2-建立工程目录（按照第一行注释的位置建文件和修改代码）" class="headerlink" title="2. 建立工程目录（按照第一行注释的位置建文件和修改代码）"></a>2. 建立工程目录（按照第一行注释的位置建文件和修改代码）</h4><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//   src/route/index.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; createRouter, createWebHashHistory &#125; <span class="keyword">from</span> <span class="string">&quot;vue-router&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">Home</span> = (<span class="params"></span>) =&gt; <span class="title function_">import</span>(<span class="string">&quot;../views/Home.vue&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">About</span> = (<span class="params"></span>) =&gt; <span class="title function_">import</span>(<span class="string">&quot;../views/About.vue&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> routes = [</span><br><span class="line">  &#123; <span class="attr">path</span>: <span class="string">&quot;/&quot;</span>, <span class="attr">redirect</span>: <span class="string">&quot;/home&quot;</span> &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&quot;/home&quot;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;home&quot;</span>,</span><br><span class="line">    <span class="attr">component</span>: <span class="title class_">Home</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&quot;/about&quot;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;about&quot;</span>,</span><br><span class="line">    <span class="attr">component</span>: <span class="title class_">About</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">];</span><br><span class="line"><span class="keyword">const</span> router = <span class="title function_">createRouter</span>(&#123;</span><br><span class="line">  <span class="attr">history</span>: <span class="title function_">createWebHashHistory</span>(),</span><br><span class="line">  <span class="attr">routes</span>: routes,</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> router;</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">// src/views/Home.vue</span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;首页&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script lang=&quot;ts&quot;&gt;</span><br><span class="line">import &#123; defineComponent &#125; from &quot;vue&quot;;</span><br><span class="line">export default defineComponent(&#123;</span><br><span class="line">  setup() &#123;</span><br><span class="line">    return &#123;&#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;);</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;style scoped&gt;&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">// src/views/About.vue</span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;关于我们&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script lang=&quot;ts&quot;&gt;</span><br><span class="line">import &#123; defineComponent &#125; from &quot;vue&quot;;</span><br><span class="line">export default defineComponent(&#123;</span><br><span class="line">  setup() &#123;</span><br><span class="line">    return &#123;&#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;);</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;style scoped&gt;&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// src/main.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; createApp &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; createPinia &#125; <span class="keyword">from</span> <span class="string">&#x27;pinia&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">&#x27;./route/index&#x27;</span></span><br><span class="line"><span class="keyword">const</span> app=<span class="title function_">createApp</span>(<span class="title class_">App</span>)</span><br><span class="line">app.<span class="title function_">use</span>(<span class="title function_">createPinia</span>());</span><br><span class="line">app.<span class="title function_">use</span>(router);</span><br><span class="line">app.<span class="title function_">mount</span>(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">// src/App.vue</span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script lang=&quot;ts&quot;&gt;</span><br><span class="line">import &#123; defineComponent &#125; from &quot;vue&quot;;</span><br><span class="line">export default defineComponent(&#123;&#125;);</span><br><span class="line">&lt;/script&gt; </span><br><span class="line">&lt;style&gt;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<h4 id="3-运行后再浏览器中输入-http-localhost-3000-about"><a href="#3-运行后再浏览器中输入-http-localhost-3000-about" class="headerlink" title="3. 运行后再浏览器中输入 http://localhost:3000/#/about"></a>3. 运行后再浏览器中输入 <a target="_blank" rel="noopener" href="http://localhost:3000/#/about">http://localhost:3000/#/about</a></h4><h3 id="六，在项目中使用less-直接下载less就可以了，sass，stylus-也一样，vite好像有默认的支持"><a href="#六，在项目中使用less-直接下载less就可以了，sass，stylus-也一样，vite好像有默认的支持" class="headerlink" title="六，在项目中使用less(直接下载less就可以了，sass，stylus,也一样，vite好像有默认的支持)"></a>六，在项目中使用less(直接下载less就可以了，sass，stylus,也一样，vite好像有默认的支持)</h3><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add  less</span><br></pre></td></tr></table></figure>

<h3 id="七，使用文件别名（-views-）"><a href="#七，使用文件别名（-views-）" class="headerlink" title="七，使用文件别名（@/views/**）"></a>七，使用文件别名（@/views/**）</h3><h4 id="1-安装基本的类型"><a href="#1-安装基本的类型" class="headerlink" title="1.安装基本的类型"></a>1.安装基本的类型</h4><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add   @types/node --dev</span><br></pre></td></tr></table></figure>

<h4 id="2-修改-vite-config-ts-（修改后已经可以使用了，但是开发工具没有路径提示）"><a href="#2-修改-vite-config-ts-（修改后已经可以使用了，但是开发工具没有路径提示）" class="headerlink" title="2.修改 vite.config.ts （修改后已经可以使用了，但是开发工具没有路径提示）"></a>2.修改 vite.config.ts （修改后已经可以使用了，但是开发工具没有路径提示）</h4><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; defineConfig &#125; <span class="keyword">from</span> <span class="string">&quot;vite&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> vue <span class="keyword">from</span> <span class="string">&quot;@vitejs/plugin-vue&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> resolve = (<span class="attr">dir</span>: <span class="built_in">string</span>): <span class="function"><span class="params">string</span> =&gt;</span> path.<span class="title function_">resolve</span>(__dirname, dir);</span><br><span class="line"><span class="comment">// https://vitejs.dev/config/</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineConfig</span>(&#123;</span><br><span class="line">  <span class="attr">plugins</span>: [<span class="title function_">vue</span>()],</span><br><span class="line">  <span class="attr">resolve</span>: &#123;</span><br><span class="line">    <span class="attr">extensions</span>: [<span class="string">&quot;.mjs&quot;</span>, <span class="string">&quot;.js&quot;</span>, <span class="string">&quot;.ts&quot;</span>, <span class="string">&quot;.jsx&quot;</span>, <span class="string">&quot;.tsx&quot;</span>, <span class="string">&quot;.json&quot;</span>],</span><br><span class="line">    <span class="attr">alias</span>: [</span><br><span class="line">      &#123; <span class="attr">find</span>: <span class="string">&quot;@&quot;</span>, <span class="attr">replacement</span>: <span class="title function_">resolve</span>(<span class="string">&quot;src&quot;</span>) &#125;,</span><br><span class="line">    ],</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h4 id="3-顶级目录新建一个-tsconfig-paths-json"><a href="#3-顶级目录新建一个-tsconfig-paths-json" class="headerlink" title="3.顶级目录新建一个 tsconfig.paths.json"></a>3.顶级目录新建一个 tsconfig.paths.json</h4><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;compilerOptions&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;baseUrl&quot;</span><span class="punctuation">:</span> <span class="string">&quot;./src&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;paths&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;@/*&quot;</span><span class="punctuation">:</span><span class="punctuation">[</span><span class="string">&quot;./*&quot;</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h4 id="4-修改tsconfig-json、"><a href="#4-修改tsconfig-json、" class="headerlink" title="4. 修改tsconfig.json、"></a>4. 修改tsconfig.json、</h4><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;extends&quot;</span><span class="punctuation">:</span> <span class="string">&quot;./tsconfig.paths.json&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="comment">// 后面的部分不要动</span></span><br><span class="line">  <span class="attr">&quot;compilerOptions&quot;</span><span class="punctuation">:</span> .....</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h4 id="5-在App-vue中键入-此时就可以看到路径提示了"><a href="#5-在App-vue中键入-此时就可以看到路径提示了" class="headerlink" title="5. 在App.vue中键入  (此时就可以看到路径提示了)"></a>5. 在App.vue中键入  (此时就可以看到路径提示了)</h4><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">Hello</span> <span class="keyword">from</span> <span class="string">&quot;@/</span></span><br></pre></td></tr></table></figure>

<h3 id="八，引入antd-按需引入"><a href="#八，引入antd-按需引入" class="headerlink" title="八，引入antd(按需引入)"></a>八，引入antd(按需引入)</h3><h4 id="1-引入antd"><a href="#1-引入antd" class="headerlink" title="1.引入antd"></a>1.引入antd</h4><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">yarn ant-design-vue@next </span><br><span class="line"></span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;Button type=&quot;primary&quot;&gt;哈哈哈哈&lt;/Button&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script lang=&quot;ts&quot;&gt;</span><br><span class="line">import &#123; Button &#125; from &#x27;ant-design-vue&#x27;;</span><br><span class="line">import &#x27;ant-design-vue/es/button/style/css&#x27;; </span><br><span class="line">export default defineComponent(&#123;</span><br><span class="line">  components:&#123;Button,&#125;,</span><br><span class="line">&#125;);</span><br><span class="line">&lt;/script&gt; </span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h4 id="此时虽然已经做到了按需引入，但是需要手动的引入样式文件，极其的不方便"><a href="#此时虽然已经做到了按需引入，但是需要手动的引入样式文件，极其的不方便" class="headerlink" title="此时虽然已经做到了按需引入，但是需要手动的引入样式文件，极其的不方便"></a>此时虽然已经做到了按需引入，但是需要手动的引入样式文件，极其的不方便</h4><h4 id="2-简化写法，（由vite去帮我们自动的样式文件），此时就需要用到插件的帮忙了"><a href="#2-简化写法，（由vite去帮我们自动的样式文件），此时就需要用到插件的帮忙了" class="headerlink" title="2.简化写法，（由vite去帮我们自动的样式文件），此时就需要用到插件的帮忙了"></a>2.简化写法，（由vite去帮我们自动的样式文件），此时就需要用到插件的帮忙了</h4><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">yarn add vite-plugin-style-import@1.4.1 -D </span><br><span class="line">// 由于 vite-plugin-style-import 的最新版本（2.0.0） 有bug 所以降级使用 1.4.1 </span><br><span class="line"></span><br></pre></td></tr></table></figure>

<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vite.config.ts </span></span><br><span class="line"><span class="keyword">import</span> &#123; defineConfig &#125; <span class="keyword">from</span> <span class="string">&quot;vite&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> vue <span class="keyword">from</span> <span class="string">&quot;@vitejs/plugin-vue&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">import</span> styleImport <span class="keyword">from</span> <span class="string">&#x27;vite-plugin-style-import&#x27;</span></span><br><span class="line"><span class="keyword">const</span> resolve = (<span class="attr">dir</span>: <span class="built_in">string</span>): <span class="function"><span class="params">string</span> =&gt;</span> path.<span class="title function_">resolve</span>(__dirname, dir);</span><br><span class="line"><span class="comment">// https://vitejs.dev/config/</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineConfig</span>(&#123;</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="title function_">styleImport</span>(&#123;</span><br><span class="line">      <span class="attr">libs</span>: [&#123;</span><br><span class="line">        <span class="attr">libraryName</span>: <span class="string">&#x27;ant-design-vue&#x27;</span>,</span><br><span class="line">        <span class="attr">esModule</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">resolveStyle</span>: <span class="function">(<span class="params">name</span>) =&gt;</span> &#123;</span><br><span class="line">          <span class="keyword">return</span> <span class="string">`ant-design-vue/es/<span class="subst">$&#123;name&#125;</span>/style/css`</span>;</span><br><span class="line">        &#125;,</span><br><span class="line">      &#125;]</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="title function_">vue</span>(),</span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">resolve</span>: &#123;</span><br><span class="line">    <span class="attr">extensions</span>: [<span class="string">&quot;.mjs&quot;</span>, <span class="string">&quot;.js&quot;</span>, <span class="string">&quot;.ts&quot;</span>, <span class="string">&quot;.jsx&quot;</span>, <span class="string">&quot;.tsx&quot;</span>, <span class="string">&quot;.json&quot;</span>],</span><br><span class="line">    <span class="attr">alias</span>: [&#123; <span class="attr">find</span>: <span class="string">&quot;@&quot;</span>, <span class="attr">replacement</span>: <span class="title function_">resolve</span>(<span class="string">&quot;src&quot;</span>) &#125;],</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="此时去掉手动引入样式文件的代码，依然可以使用antd的button-组件"><a href="#此时去掉手动引入样式文件的代码，依然可以使用antd的button-组件" class="headerlink" title="此时去掉手动引入样式文件的代码，依然可以使用antd的button 组件"></a>此时去掉手动引入样式文件的代码，依然可以使用antd的button 组件</h3><h2 id="九，使用插件自动生成接口文档（ts类型）"><a href="#九，使用插件自动生成接口文档（ts类型）" class="headerlink" title="九，使用插件自动生成接口文档（ts类型）"></a>九，使用插件自动生成接口文档（ts类型）</h2><h3 id="1-安装插件"><a href="#1-安装插件" class="headerlink" title="1, 安装插件"></a>1, 安装插件</h3><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">yarn add  swagger-to-ts -D</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="2-配置命令-package-json"><a href="#2-配置命令-package-json" class="headerlink" title="2, 配置命令 (package.json)"></a>2, 配置命令 (package.json)</h3><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;scripts&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;doc&quot;</span><span class="punctuation">:</span> <span class="string">&quot;swagger-to-ts --docUrl http://127.0.0.1:8082/v2/api-docs  --outputDir apitypes&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>
<!-- swagger-to-ts --docUrl http://220.112.1.174:8082/v2/api-docs --paths  --outputDir apitypes -->
<h2 id="规范（非必须，但强烈推荐）"><a href="#规范（非必须，但强烈推荐）" class="headerlink" title="规范（非必须，但强烈推荐）"></a>规范（非必须，但强烈推荐）</h2>
    </div>
    <footer class="article-footer">
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/Hexo_blog/tags/vue3-Python/" rel="tag">vue3 Python</a></li></ul>

    </footer>
  </div>
  
  
    
<nav class="article-nav pt-4 mt-3" id="article-nav">
  
    <a href="/Hexo_blog/2022/03/04/Hexo-%E5%AE%89%E8%A3%85%E5%92%8C%E9%83%A8%E7%BD%B2%E7%AE%80%E4%BB%8B/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">前一篇</strong>
      <div class="article-nav-title">
        
          Hexo 安装和部署简介
        
      </div>
    </a>
  
  
    <a href="/Hexo_blog/2022/03/03/hello-world/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">后一篇</strong>
      <div class="article-nav-title">Hello World</div>
    </a>
  
</nav>


  
</article>
</div>
    </section>
    <footer class="footer pt-5 mt-5">
  <div class="container">
    <div class="py-3">
      <div class="row justify-content-between">
        <div class="col-6">
          <img class="filter-gray mb-3" height="40" src="/Hexo_blog/images/brand.svg" alt="Hexo Cobra1966" role="img">
          <p class="mb-4">记录Vue3、Python学习笔记和实例技术分享</p>
          <ul class="list-inline">
            
          </ul>
        </div>
        <div class="col-4">
          <h5>友情链接</h5>
          <ul class="list-inline">
            
          </ul>
        </div>
      </div>
    </div>
    <hr class="hr" style="opacity: .25;">
    <div class="pt-3 pb-5">
      <ul class="list-inline mb-0 text-center">
        <li class="list-inline-item">&copy; 2022 Hexo Cobra1966</li>
        
        <li class="list-inline-item">Powered by <a href="http://hexo.io/" target="_blank">Hexo</a></li>
        <li class="list-inline-item">Designer <a href="https://acorn.imaging.xin/" target="_blank">Snake1966</a></li>
      </ul>
    </div>
  </div>
</footer>
  </main>
  <div id="mobile-nav-dimmer"></div>
<div id="mobile-nav">
	<div id="mobile-nav-inner">
		<ul class="mobile-nav">
  
    
  <li class="nav-item ">
    <a class="nav-item-link" href="/Hexo_blog/">首页</a>
  </li>
  
    
  <li class="nav-item ">
    <a class="nav-item-link" href="/Hexo_blog/gallery">画廊</a>
  </li>
  
    
  <li class="nav-item ">
    <a class="nav-item-link" href="/Hexo_blog/stories">案例</a>
  </li>
  
    
  <li class="nav-item ">
    <a class="nav-item-link" href="/Hexo_blog/archives">新闻</a>
  </li>
  
    
  <li class="nav-item ">
    <a class="nav-item-link" href="/Hexo_blog/about">关于</a>
  </li>
  
</ul>
	</div>
</div>

  
<script src="//cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>


<script src="//cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>


<script src="/Hexo_blog/js/script.js"></script>


<script src="/Hexo_blog/js/mobile-nav.js"></script>

</body>
</html>